Skip to content

fix(types): expose Modal native ref prop#56952

Closed
ya-nsh wants to merge 1 commit into
facebook:mainfrom
ya-nsh:fix/modal-ref-types-refobject
Closed

fix(types): expose Modal native ref prop#56952
ya-nsh wants to merge 1 commit into
facebook:mainfrom
ya-nsh:fix/modal-ref-types-refobject

Conversation

@ya-nsh
Copy link
Copy Markdown
Contributor

@ya-nsh ya-nsh commented May 23, 2026

Summary

  • add modalRef to the hand-written Modal TypeScript declarations
  • align the hand-written declaration with existing React.RefObject ref prop typing patterns
  • add typetest coverage for passing a Modal ref through modalRef

This replaces #56889, which GitHub auto-closed after its pull ref got stuck on a bad force-pushed commit. The branch here contains the same scoped fix plus the review feedback from #56889.

Modal already accepts modalRef at runtime and the generated API snapshot already includes it. The hand-written declarations were the odd one out, so TypeScript users could not pass the supported ref prop without a local cast.

Changelog:

[General] [Fixed] - Expose Modal native ref prop in TypeScript declarations

Test Plan

  • npx prettier --check packages/react-native/Libraries/Modal/Modal.d.ts packages/react-native/types/__typetests__/index.tsx
  • npm run test-typescript -- --pretty false
  • npm run build-types
  • npm run test-generated-typescript -- --pretty false

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label May 23, 2026
@facebook-github-tools facebook-github-tools Bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label May 23, 2026
@@ -1540,6 +1541,10 @@ const KeyboardAvoidingViewTest = () => <KeyboardAvoidingView enabled />;

const ModalTest = () => <Modal hardwareAccelerated />;
const ModalTest2 = () => <Modal hardwareAccelerated testID="modal-test-2" />;
const ModalRefTest = () => {
const modalRef = React.useRef<Modal & HostInstance>(null);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an exotic but valid usage 😅

After react-native-community/discussions-and-proposals#1003, this will be replaceable with ModalInstance soon, hopefully.

/**
* A ref to the native Modal component.
*/
modalRef?: React.RefObject<Modal | null> | undefined;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is load bearing + LGTM 👍🏻

@meta-codesync
Copy link
Copy Markdown

meta-codesync Bot commented Jun 1, 2026

@huntie has imported this pull request. If you are a Meta employee, you can view this in D107081018.

@huntie huntie added the JS API stabilization (1.0) Follow-up items from our JS API changes in 0.80 (deep imports deprecation and Strict TypeScript API) label Jun 1, 2026
@meta-codesync meta-codesync Bot closed this in 7cc8c76 Jun 1, 2026
@react-native-bot
Copy link
Copy Markdown
Collaborator

This pull request was successfully merged by @ya-nsh in 7cc8c76

When will my fix make it into a release? | How to file a pick request?

@react-native-bot react-native-bot added the Merged This PR has been merged. label Jun 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. JS API stabilization (1.0) Follow-up items from our JS API changes in 0.80 (deep imports deprecation and Strict TypeScript API) Merged This PR has been merged. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants